<template>
  <div>
    <ul class="ul_card_">
      <li class="li_card_item">
        <div class="title_li">版本信息</div>
        <div class="bag_item">
          <div class="card_tip">
            <div class="card_tip_ti"> <h4>旗舰版</h4><span>(当前版本)</span> </div>
            <p>服务期限：xxxxxx</p>
          </div>
          <div style="display: flex; gap: 5px">
            <HPlainButton @click="onShowSysUpgrade">续费</HPlainButton>
            <HPlainButton @click="onShowSysUpgrade">升级更高版本</HPlainButton>
          </div>
        </div>
      </li>
      <li class="li_card_item">
        <div class="title_li">账户余额</div>
        <div class="bag_item">
          <div class="card_tip">
            <div class="card_tip_ti"> <h4>￥168888.00</h4><span>(单位：元)</span> </div>
            <p>服务期限：xxxxxx</p>
          </div>
          <div style="display: flex; gap: 5px">
            <HPlainButton @click="onShowSysUpgrade">充值</HPlainButton>
            <HPlainButton @click="onShowSysUpgrade">查看余额明细</HPlainButton>
          </div>
        </div>
      </li>
    </ul>
    <div class="mo_div">
      <div class="title_li">系统容量</div>
      <ul class="ul_mo">
        <li class="li_mo">
          <div class="li_mo_title"
            ><el-icon class="img_mo" size="14"><User/></el-icon> <span>公司量</span></div
          >
          <div class="progress_mo">
            <el-progress type="circle" :width="80" color="#007cff" :percentage="(18 / 30) * 100">
              <span class="percentage-label">总量</span>
              <span class="percentage-value">30人</span>
            </el-progress>
            <div class="tip_mo">
              <span>已用：12人</span>
              <span>剩余：18人</span>
            </div>
          </div>
          <div class="bot_tip">
            <HLink @click="onShowSysUpgrade">购买公司</HLink>
            <HLink @click="onShowSysUpgrade">查看详情</HLink>
          </div>
        </li>
        <li class="li_mo">
          <div class="li_mo_title"
            ><el-icon class="img_mo" size="14"><Message /></el-icon><span>短信发送量</span></div
          >
          <div class="progress_mo">
            <el-progress type="circle" :width="80" color="#007cff" :percentage="(500 / 3000) * 100">
              <span class="percentage-label">总量</span>
              <span class="percentage-value">{{ 3000 }}条</span>
            </el-progress>
            <div class="tip_mo">
              <span>已用：2500条</span>
              <span class="dif_span"
                >剩余：500条
                <el-tooltip
                  effect="dark"
                  :offset="5"
                  content="低于预警值,请尽快充值"
                  placement="top"
                >
                  <el-icon color="#ff8d1a" size="14" class="icon_Warning">
                    <WarningFilled />
                  </el-icon> </el-tooltip
              ></span>
            </div>
          </div>
          <div class="bot_tip">
            <HLink @click="onShowSysUpgrade">购买公司</HLink>
            <HLink @click="onShowSysUpgrade">查看详情</HLink>
          </div>
        </li>
        <li class="li_mo">
          <div class="li_mo_title"
            ><el-icon class="img_mo" size="14"><Connection /></el-icon><span>附件上传量</span></div
          >
          <div class="progress_mo">
            <el-progress type="circle" :width="80" color="#007cff" :percentage="(28 / 30) * 100">
              <span class="percentage-label">每年总量</span>
              <span class="percentage-value">30G</span>
            </el-progress>
            <div class="tip_mo">
              <span>已用：8G</span>
              <span>本年剩余：22G</span>
            </div>
          </div>
          <div class="bot_tip">
            <HLink @click="onShowSysUpgrade">购买公司</HLink>
            <HLink @click="onShowSysUpgrade">查看详情</HLink>
          </div>
        </li>
        <li class="li_mo">
          <div class="li_mo_title"
            ><el-icon class="img_mo" size="14"><VideoCamera /></el-icon><span>视频上传量</span></div
          >
          <div class="progress_mo">
            <el-progress type="circle" :width="80" color="#007cff" :percentage="30">
              <span class="percentage-label">每年总量</span>
              <span class="percentage-value">30G</span>
            </el-progress>
            <div class="tip_mo">
              <span>已用：8G</span>
              <span>本年剩余：22G</span>
            </div>
          </div>
          <div class="bot_tip">
            <HLink @click="onShowSysUpgrade">购买公司</HLink>
            <HLink @click="onShowSysUpgrade">查看详情</HLink>
          </div>
        </li>
        <li class="li_mo">
          <div class="li_mo_title"
            ><el-icon class="img_mo" size="14"><Document /></el-icon><span>工单使用量</span></div
          >
          <div class="progress_mo">
            <el-progress type="circle" :width="80" color="#007cff" :percentage="30">
              <span class="percentage-label">总量</span>
              <span class="percentage-value">30条</span>
            </el-progress>
            <div class="tip_mo">
              <span>已用：8条</span>
              <span>剩余：22条</span>
            </div>
          </div>
          <div class="bot_tip">
            <HLink @click="onShowSysUpgrade">购买公司</HLink>
            <HLink @click="onShowSysUpgrade">查看详情</HLink>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import { WarningFilled } from '@element-plus/icons-vue'
  import HLink from '@/components/common/link/HLink.vue'
  import { ElMessage } from 'element-plus'

  const onShowSysUpgrade = () => {
    ElMessage({
      type: 'success',
      message: '正在升级维护中，敬请期待...',
    })
  }
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>
